<!DOCTYPE html>
<html lang="zh-cmn-Hans-CN">
<head>
    <title><%= htmlWebpackPlugin.options.title %></title>
    <%= require('../partials/head.ejs')() %>
</head>

<body>
<%= require('../partials/header.ejs')({title: htmlWebpackPlugin.options.title}) %>

<!-- S:container -->
<div class="container">
    <!-- asset-structure -->
    <div class="asset-structure light-bg">
        <!-- structure pie -->
        <div class="structure-pie red-box">
            <div class="pie-list">
                <p>
                    <span class="ring red"></span>
                    <span class="fund-type">股票基金</span>
                    <span class="fund-percent">25%</span>
                </p>
                <p>
                    <span class="ring org"></span>
                    <span class="fund-type">债券基金</span>
                    <span class="fund-percent">25%</span>
                </p>
                <p>
                    <span class="ring green"></span>
                    <span class="fund-type">货币基金</span>
                    <span class="fund-percent">25%</span>
                </p>
                <p>
                    <span class="ring verdancy"></span>
                    <span class="fund-type">其他基金</span>
                    <span class="fund-percent">25%</span>
                </p>
            </div>
            <div class="pie-img">
                <!--<img src="../../images/structure-pie@2x.png" alt="">-->
            </div>
        </div>
        <!-- top-fund 1 -->
        <div class="top-fund box">
            <ol class="line-bottom-list">
                <li>
                    <h2 class="fund-name dark">股票基金资产额：<span class="black">125,000元</span></h2>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">股票基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">股票基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">股票基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">股票基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">股票基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">股票基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">股票基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">股票基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">股票基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
            </ol>
        </div>
        <!-- top-fund 2 -->
        <div class="top-fund box hide">
            <ol class="line-bottom-list">
                <li>
                    <h2 class="fund-name dark">债券基金资产额：<span class="black">8,600元</span></h2>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">债券基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">债券基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">债券基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">债券基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">债券基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">债券基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">债券基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">债券基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">债券基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
            </ol>
        </div>
        <!-- top-fund 3 -->
        <div class="top-fund box hide">
            <ol class="line-bottom-list">
                <li>
                    <h2 class="fund-name dark">货币基金资产额：<span class="black">92,080元</span></h2>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">货币基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">货币基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">货币基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">货币基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">货币基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">货币基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">货币基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">货币基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">货币基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
            </ol>
        </div>
        <!-- top-fund 4 -->
        <div class="top-fund box hide">
            <ol class="line-bottom-list">
                <li>
                    <h2 class="fund-name dark">其他基金资产额：<span class="black">88,660元</span></h2>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">其他基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">其他基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">其他基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">其他基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">其他基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">其他基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">其他基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">其他基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
                <li>
                    <a href="position-detail.html" class="arrow-right">
                        <h2 class="fund-name">其他基金列表名称<span class="fund-code dark">106432</span></h2>
                    </a>
                </li>
            </ol>
        </div>
    </div>
</div>
<!-- E:container -->

<script>
    seajs.use([
        "highcharts",
        "hce"
    ], function () {
        $(function () {
            var configChart = {
                poniter: {
                    x: 0,
                    y: 0
                },
                value: {
                    xValue: "",
                    yValue: ""
                },
                option: {}
            };
            configChart.option = {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    backgroundColor:'#fff',
                    events: {
                        load: function () {
                            configChart.poniter.x = this.series[0].center[0] + 16;
                            configChart.poniter.y = this.series[0].center[1] - 4;
                        }
                    },
                    height: $.remPx(5)
                },
                title: {
                    text: ''
                },
                exporting: {
                    enabled: false
                },
                navigator: {
                    enabled: false
                },
                legend: {
                    enabled: false,
                },
                tooltip: {
                    formatter: function () {
                        configChart.value.yValue = this.y + '';
                        var style = 'style="text-anchor: middle;color:' + this.color + ';"';

                        return '<span ' + style + ' >' + this.key + '</span><br/><span ' + style + '>' + configChart.value.yValue + '元</span>';
                    },
                    notHide: true,
                    animation: true,
                    backgroundColor: null,
                    borderWidth: 0,
                    followPointer: false,
                    followTouchMove: false,
                    positioner: function () {
                        return {
                            x: configChart.poniter.x + (-configChart.value.yValue.length) * 3.4,
                            y: configChart.poniter.y - 6,
                            'text-anchor': 'middle'
                        };
                    },
                    style: {
                        'margin-left': '-10px',
                        'display': "block!important"
                    },
                    shared: true
                },

                plotOptions: {
                    pie: {
                        colors:['#de2d1b','#feac00','#95c108','#d5e256'],
                        allowPointSelect: true,
                        selected: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: false
                        },
                        states: {
                            hover: {
                                brightness: 0.1,
                                halo: {
                                    opacity: 1,
                                    size: 0
                                },
                                lineWidthPlus: 0,
                                lineWidth: 0,
                                marker: {
                                    enabled: false
                                }
                            },
                        },
                        shadow:true,
                        showInLegend: true,
                        size: "130%",
                        innerSize: '70',
                        borderWidth: 0,
                        point:{
                            events:{
                                select:function () {
                                    $(".top-fund").eq(this.index).removeClass("hide").siblings(".top-fund").addClass("hide");
                                }
                            }
                        }


                    }
                },
                series: [{
                    type: 'pie',
                    data: [
                        ['股票基金', 1599],
                        ['债劵基金', 2000],
                        ['货币基金', 1000],
                        ['其他基金', 3000]
                    ]
                }],
                credits: {
                    enabled: false
                },
            };
            $('.pie-img').highcharts(configChart.option);
            var chart=$('.pie-img').highcharts();
            chart.tooltip.refresh(chart.series[0].points[0]);
        })
    });
</script>
</body>
</html>
